<template>
  <view class="content">
    <view class="top_content">
      <div class="personal_info">
        <img class="user_icon" :src="userInfo.F_HeadIcon" alt="" />
        <text class="user_name">{{ userInfo.F_Account }}</text>
      </div>
      <div>
        <button @click="logOut()">退出</button>
      </div>
    </view>
    <view v-if="listData.length > 0" class="flex-wrp">
      <view v-for="(item, index) in listData" :key="index">
        <view class="list" @click="detailClick(item, index)">
          <view class="l_left" mode="heightFix">
            <text class="period">生产订单号：{{ item.poh_no }}</text>
            <text class="period">产品编码：{{ item.bii_code }}</text>
            <text class="period">产品名称：{{ item.bii_name }}</text>
          </view>
          <view class="r_item">
            <!-- <u-circle-progress
              active-color="#2979ff"
              :percent="parseFloat(item.construction_scheduling || 0)"
              width="110"
              :border-width="8"
            >
              <view class="u-progress-content">
                <view class="u-progress-dot"></view>
                <text class="u-progress-info"
                  >{{ item.construction_scheduling }}%</text
                >
              </view>
            </u-circle-progress> -->
          </view>
          <view class="line"></view>
        </view>
      </view>
      <u-loadmore
        v-if="listData.length < total"
        style="loadmore"
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
      />
      <view v-if="listData.length == total" class="load-more" @click="loadMore"
        >~已到底~</view
      >
    </view>
    <view v-else>
      <view class="tkxxBox">
        <image :src="noData" class="tkxxPic" />
      </view>
      <view class="contentTxt">未发现有数据~</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onUnmounted } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getHomeData } from '@/api/home'

const show = ref(false);
const userInfo = reactive({
  F_HeadIcon: '',
  F_Account: ''
});
const listData = ref<any[]>([]); // Use any[] for now, can be more specific if schema is known
const page = ref(1);
const total = ref(0);
const hasMore = ref(true); // Keeping for now, though not explicitly used for loadmore status
const status = ref("loadmore");
const iconType = ref("circle");
const loadText = reactive({
  loadmore: "上拉加载更多",
  loading: "加载中",
  nomore: "没有更多了",
});
const noData = ref("/static/image/msg.png");

// Methods
const loadData = () => {
  getHomeData({
      pob_state: 4,
      limit: page.value,
      size: 10,
    })
    .then((res: any) => {
      if (res.success) {
        listData.value = [...listData.value, ...res.data.Rows];
        total.value = res.data.Total;
      }
    })
    .finally(() => {
      uni.stopPullDownRefresh(); // Stop pull-down refresh animation
    });
};

const loadMore = () => {
  if (listData.value.length < total.value) {
    page.value++;
    loadData();
  }
};

const logOut = () => {
  uni.showModal({
    title: "提示",
    content: "确认退出？",
    success: async (res) => {
      if (res.confirm) {
        uni.removeStorageSync("userInfo");
        uni.reLaunch({
          url: "/pages/login/index",
        });
      }
    },
  });
};

const refreshProgress = () => {
  page.value = 1;
  listData.value = [];
  loadData();
};

const detailClick = (item: any, index: number) => {
  console.log('detailClick', item, index);
  uni.navigateTo({
    url: `/pages/detail/detail?orderId=${item.poh_no}`
  });
};

onLoad(() => {
  page.value = 1;
  listData.value = [];
  loadData();
  uni.$on("refreshProgress", refreshProgress);
});

onShow(() => {
  let storedUserInfo = uni.getStorageSync("userInfo");
  if (storedUserInfo) {
    Object.assign(userInfo, storedUserInfo);
  } else {
    uni.reLaunch({
      url: "/pages/login/index",
    });
  }
});

onUnmounted(() => {
  uni.$off("refreshProgress", refreshProgress);
});

onReachBottom(() => {
  if (listData.value.length < total.value) {
    loadMore();
  }
});

</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh; 
  padding-bottom: 50rpx; 
  background-image: url("../../assets/imgs/bg.png");
}

.top_content {
  width: 100%;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  position: fixed;
  top: var(--window-top);
  left: 0;
  right: 0;
  z-index: 10;
  height: 150rpx; 
  .personal_info {
    display: flex;
    align-items: center;
    .user_icon {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      margin-right: 25rpx;
      border: 2rpx solid #e0e0e0;
    }
    .user_name {
      font-size: 34rpx; 
      font-weight: 600;
      color: #333333; 
    }
  }
  button {
    background-color: #ff6f61; 
    color: #fff;
    font-size: 28rpx;
    border-radius: 25rpx; 
    border: none;
    box-shadow: 0 4rpx 8rpx rgba(255, 111, 97, 0.3); 
  }
}

.flex-wrp {
  margin-top: calc(var(--window-top) + 170rpx); 
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.list {
  background-color: #fff;
  border-radius: 16rpx; 
  padding: 35rpx; 
  margin-bottom: 25rpx; 
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  justify-content: space-between;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08); 
  transition: transform 0.2s ease-in-out; 

  &:hover {
    transform: translateY(-5rpx); 
  }

  .l_left {
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx; 

    .period {
      font-size: 30rpx; 
      color: #555; 
      margin-bottom: 12rpx; 

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .r_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    .u-progress-content {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
    }
    .u-progress-dot {
      position: absolute;
      width: 12rpx; 
      height: 12rpx;
      background-color: #2979ff;
      border-radius: 50%;
    }
    .u-progress-info {
      font-size: 26rpx; 
      color: #2979ff;
      font-weight: 500; 
    }
    .u-button {
      margin-left: 30rpx; 
    }
  }
  .line {
    display: none; 
  }
}

.loadmore {
  margin-top: 40rpx; 
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #777; 
  font-size: 28rpx;
  margin-top: 20rpx; 
}

.tkxxBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150rpx; 

  .tkxxPic {
    width: 350rpx; 
    height: 350rpx;
  }
}

.contentTxt {
  text-align: center;
  color: #777;
  font-size: 30rpx; 
  margin-top: 30rpx; 
}

.buttonBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;

  .company-item {
    width: 80%;
    margin-bottom: 25rpx; 
  }
}
</style>
